<template>
  <ul v-infinite-scroll="load" class="overflow-y-auto h-full list-none">
    <li v-for="i in answerList" :key="i" class="infinite-list-item">
      <el-avatar
        :src="'http://localhost:7345/upload/' + i.avatar"
        class="mr-2"
      />
      <div class="border-b-neutral-200 border-b w-full">
        {{ i.problem_content }}
      </div>
    </li>
  </ul>
</template>

<script lang="ts" setup>
import { queryAnswerListApi } from "@/utils/api/questions";
import { ref, watch } from "vue";

interface Answer {
  problem_id: string;
  problem_content: string;
  avatar: string;
}

let answerList = ref([] as Answer[]);
let offset = 0;
let limit = 5;
const props = defineProps(["questionId", "answerCount"]);
const load = () => {
  queryAnswerListApi(props.questionId, offset, limit).then((res) => {
    if (res.data.length !== 0) {
      for (let re of res.data) {
        answerList.value.push(re);
      }
      offset += 5;
      limit += 5;
    }
  });
};
// 监听问题回答数变化
watch(
  () => props.answerCount,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      answerList.value = [];
      offset = 0;
      limit = 5;
      load();
    }
  }
);
</script>

<style scoped>

.infinite-list-item {
    display: flex;
    align-items: center;
    height: 50px;
    margin: 10px;
}

.infinite-list-item + .list-item {
    margin-top: 10px;
}

</style>
